<template>
  <div>
    <h1>图片裁剪示例</h1>
    <input type="file" @change="handleFileChange" />
    <div v-if="option.img">
      <vue-cropper ref="cropper" :img="option.img" :outputSize="option.outputSize" :outputType="option.outputType"
        :autoCrop="option.autoCrop" :autoCropWidth="option.autoCropWidth" :autoCropHeight="option.autoCropHeight"
        :canMove="option.canMove" :canMoveBox="option.canMoveBox" :fixedBox="option.fixedBox"
        :centerBox="option.centerBox" :info="option.info" style="width: 100%; height: 500px"></vue-cropper>
      <button @click="cropImage">裁剪图片</button>
      <div v-if="croppedImageUrl">
        <h3>裁剪后的图片</h3>
        <img :src="croppedImageUrl" alt="Cropped Image" />
      </div>
    </div>
  </div>
</template>

<script>
import { VueCropper } from "vue-cropper";

export default {
  name: 'CropperView',
  components: {
    VueCropper,
  },
  data() {
    return {
      option: {
        img: "", // 裁剪图片的地址
        outputSize: 1, // 裁剪生成图片的质量(可选0.1 - 1)
        outputType: "png", // 裁剪生成图片的格式（jpeg || png || webp）
        autoCrop: true, // 是否默认生成截图框
        autoCropWidth: 300, // 默认生成截图框宽度
        autoCropHeight: 300, // 默认生成截图框高度
        canMove: true, // 上传图片是否可以移动
        canMoveBox: true, // 截图框能否拖动
        fixedBox: false, // 固定截图框大小，不允许改变
        centerBox: true, // 截图框是否被限制在图片里面
        info: true, // 图片大小信息
      },
      croppedImageUrl: null, // 裁剪后的图片 URL
    };
  },
  methods: {
    handleFileChange(event) {
      const file = event.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = (e) => {
          this.option.img = e.target.result; // 设置图片地址
        };
        reader.readAsDataURL(file);
      }
    },
    cropImage() {
      // 获取裁剪后的图片数据
      this.$refs.cropper.getCropData((data) => {
        this.croppedImageUrl = data; // 将裁剪后的图片显示出来
      });
    },
  },
};
</script>

<style scoped>
img {
  max-width: 100%;
}
</style>

